<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
                template="/templates/main-layout.xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns="http://www.w3.org/1999/xhtml"
                xmlns:p="http://primefaces.org/ui">

    <ui:define name="metaData">
    </ui:define>

    <ui:define name="title">
        <h:outputText value="#{msg.create_parent_title}"></h:outputText>
    </ui:define>

    <ui:define name="content">
        <f:view>
            <h:panelGroup id="messagePanel" layout="block">
                <h:messages globalOnly="true" errorStyle="color: red" infoStyle="color: green" />
            </h:panelGroup>
            <h4>#{msg.create_parent_header}</h4>
            <span class="required-label">* required</span>
            <p/>
            <h:form>
                <h:panelGrid columns="3">
                    <h:outputLabel styleClass="formLabel required" value="#{msg.first_name_label}" for="firstName" />
                    <h:inputText styleClass="formTextBox" id="firstName" value="#{parent.firstName}"
                                 title="#{msg.first_name_label}" required="true"
                                 requiredMessage="#{msg.required_first_name_message}"/>
                    <h:message for="firstName"  errorStyle="color: red" />
                    <h:outputLabel styleClass="formLabel required" value="#{msg.last_name_label}" for="lastName" />
                    <h:inputText styleClass="formTextBox" id="lastName" value="#{parent.lastName}"
                                 title="#{msg.last_name_label}" required="true"
                                 requiredMessage="#{msg.required_last_name_message}"/>
                    <h:message for="lastName" errorStyle="color: red" />
                    <h:outputLabel styleClass="formLabel required" value="#{msg.street_label}" for="street" />
                    <h:inputText styleClass="formTextBox" id="street" value="#{parent.street}"
                                 title="#{msg.street_label}" required="true"
                                 requiredMessage="#{msg.required_street_message}"/>
                    <h:message for="street" errorStyle="color: red" />
                    <h:outputLabel styleClass="formLabel required" value="#{msg.city_label}" for="city" />
                    <h:inputText styleClass="formTextBox" id="city" value="#{parent.city}"
                                 title="#{msg.city_label}" required="true"
                                 requiredMessage="#{msg.required_city_message}"/>
                    <h:message for="city" errorStyle="color: red" />
                    <h:outputLabel styleClass="formLabel required" value="#{msg.state_label}" for="states" />
                    <h:selectOneMenu styleClass="formSelect" id="states" value="#{parent.state}" required="true"
                                     converterMessage="#{msg.required_state_message}">
                        <f:selectItem itemValue="NULL" itemLabel="--Select--" />
                        <f:selectItems value="#{parent.states}" var="stateItem" itemValue="#{stateItem}"
                                       itemLabel="#{stateItem.label}" />
                    </h:selectOneMenu>
                    <h:message for="states" errorStyle="color: red" />
                    <h:outputLabel styleClass="formLabel required" value="#{msg.zip_label}" for="zip" />
                    <h:inputText styleClass="formTextBox" id="zip" value="#{parent.zip}" required="true"
                                 title="#{msg.zip_label}" requiredMessage="#{msg.required_zip_message}"
                                 validatorMessage="#{msg.invalid_zip_code}" >
                        <f:validateRegex for="zip" pattern="^(^\d{5}$)|(^\d{5}-\d{4}$)$" />
                    </h:inputText>
                    <h:message for="zip" errorStyle="color: red" />
                    <h:outputLabel styleClass="formLabel required" value="#{msg.work_phone_label}"
                                   for="workPhone" />
                    <h:inputText styleClass="formTextBox" id="workPhone" value="#{parent.workPhone}"
                                 required="true" title="#{msg.work_phone_label}"
                                 validatorMessage="#{msg.invalid_phone_number}"
                                 requiredMessage="#{msg.required_work_phone_message}"
                                 onblur="formatPhoneNumber(this);">
                        <f:validateRegex for="workPhone" pattern="[0-9]{0,10}" />
                    </h:inputText>
                    <h:message for="workPhone" errorStyle="color: red" />
                    <h:outputLabel styleClass="formLabel required" value="#{msg.primary_phone_label}"
                                   for="primaryPhone" />
                    <h:inputText styleClass="formTextBox" id="primaryPhone" value="#{parent.primaryPhone}"
                                 title="#{msg.primary_phone_label}" validatorMessage="#{msg.invalid_phone_number}"
                                 onblur="formatPhoneNumber(this);">
                        <f:validateRegex for="primaryPhone" pattern="[0-9]{0,10}" />
                    </h:inputText>
                    <h:message for="primaryPhone" errorStyle="color: red" />
                    <h:outputLabel styleClass="formLabel" value="#{msg.secondary_phone_label}" for="secondaryPhone" />
                    <h:inputText styleClass="formTextBox" id="secondaryPhone" value="#{parent.secondaryPhone}"
                                 title="#{msg.secondary_phone_label}"
                                 validatorMessage="#{msg.invalid_phone_number}" onblur="formatPhoneNumber(this);" >
                        <f:validateRegex for="secondaryPhone" pattern="[0-9]{0,10}" />
                    </h:inputText>
                    <h:message for="secondaryPhone" errorStyle="color: red" />
                    <h:outputLabel styleClass="formLabel" value="#{msg.email_label}" for="email" />
                    <h:inputText styleClass="formTextBox" id="email" value="#{parent.email}"
                                 title="#{msg.email_label}" />
                    <h:message for="email" errorStyle="color: red" />
                </h:panelGrid>
                <h:commandButton styleClass="formButton" action="#{home.mainMenu}" value="#{msg.home_button_label}" immediate="true" />
                <h:commandButton styleClass="formButton" action="#{parent.create}" value="#{msg.submit_button_label}" />
            </h:form>
        </f:view>
    </ui:define>
</ui:composition>
